#{extends 'main.html'/}
#{set 'moreCss'}
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/1.3.7/theme-default/index.css">
<style>
    .affix {
        top: 80px;
    }
    .profile-image{
        width: 140px;
        height: 200px;
    }
    .panel-body p{
        min-height:40px;
    }
    .panel-body h4{
        min-height:40px;
    }
    @media (max-width:767px) {
        .profile-image{
            width: 70px;
            height: 100px;
        }
        .panel-body p{
            font-size:1em;
            min-height:28px;
            max-height:34px;
        }
        .panel-body h4{
            font-size:1em;
            min-height:24px;
            max-height:28px;
        }
    }

</style>
#{/set}
#{set 'moreScripts'}
    <script src="https://unpkg.com/mockjs@1.0.1-beta3/dist/mock-min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/1.3.7/index.js"></script>
    <script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
    <script>
          var app = new Vue({
            el : "#app",
            data : {
                pageData:{
                    list: [],
                    totalCount:0,
                    pageSize:20,
                    currPage:1,
                },
                tutorType:null,
            },
              mounted:function(){
                  $.getJSON('/tts/schoolJson/${schoolName}', function(data) {
                      _.forEach(data.list, function(t){
                          if(t.headShot)
                              t.headShot = "https://hr.sufe.edu.cn/hr/upload/photo/" + t.headShot;
                          else
                              t.headShot = "/public/images/defaultportrait.jpg";
                      });
                      app.pageData = data;
                  });
              },
              methods: {
                  handleCurrentChange:function(val) {
                      $.getJSON('/tts/schoolJson/${schoolName}', {"page":val,"tutorType":app.tutorType},function(data) {
                          _.forEach(data.list, function(t){
                              if(t.headShot)
                                  t.headShot = "https://hr.sufe.edu.cn/hr/upload/photo/" + t.headShot;
                              else
                                  t.headShot = "/public/images/defaultportrait.jpg";
                          });
                          app.pageData = data;
                      });
                  },
                  handleType:function(type) {
                      var tutorType = ['','博士生导师','硕士生导师'];
                      app.tutorType = tutorType[type];
                      $.getJSON('/tts/schoolJson/${schoolName}', {"page":1,"tutorType":app.tutorType},function(data) {
                          _.forEach(data.list, function(t){
                              if(t.headShot)
                                  t.headShot = "https://hr.sufe.edu.cn/hr/upload/photo/" + t.headShot;
                              else
                                  t.headShot = "/public/images/defaultportrait.jpg";
                          });
                          app.pageData = data;
                      });

                  }
              },
        });
    </script>
#{/set}
  <div id="app">
    <!-- Navigation -->
    #{navbar /}
    <!-- Page Content -->
    <div class="container">
        <!-- Page Heading/Breadcrumbs -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">${schoolName}
                    <small>导师一览</small>
                </h1>
                <ol class="breadcrumb">
                    <li><a href="/">首页</a>
                    </li>
                    <li class="active">${schoolName}</li>
                </ol>
            </div>
        </div>
        <!-- /.row -->
        <div class="row" style="position:relative">
            <!-- Sidebar Column -->
            <div class="col-md-12" style="positioin:relative;z-index:999">
                <div class="list-group" data-offset-top="100">
                    <a href="#" class="list-group-item active" @click="handleType(0)">全部</a>
                    <a href="#" class="list-group-item"  @click="handleType(1)">博士生导师</a>
                    <a href="#" class="list-group-item" @click="handleType(2)">硕士生导师</a>
                </div>
            </div>
            <!-- Content Column -->
            <div class="col-md-12">
                <div class="row isotope">
                  <div class="col-md-3 col-xs-6 tutor" v-for="(t,index) in pageData.list" v-bind:class="{master:t.tutorType=='硕士生导师',doctor:t.tutorType=='博士生导师'}">
                      <div class="panel panel-default text-center">
                          <div class="panel-heading">
                              <a :href="'/tts/tutor/detail/'+t.code" v-if="t.isOpen">
                                  <img class="img-responsive img-circle img-related profile-image" :src='t.headShot' alt="">
                              </a>
                              <img class="img-responsive img-circle img-related profile-image" style="opacity:0.6" :src='t.headShot' alt="" v-else>
                          </div>
                          <div class="panel-body">
                              <h4>{{t.name}}</h4>
                              <p> {{t.tutorType}} {{t.professionalTitle}} {{t.direction}}</p>
                          </div>
                      </div>
                  </div>
                </div>
            </div>

        </div>
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page="pageData.currPage"
                :page-size="20"
                layout="total, prev, pager, next, jumper"
                :total="pageData.totalCount">
        </el-pagination>
        <!-- Related Projects Row -->
        <!-- /.row -->

        <hr>

        <!-- Footer -->
    #{footer /}

    </div>
    <!-- /.container -->
  </div>
